<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>好运网</title>

    <link rel="stylesheet" type="text/css" href="/css/basic.css">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" type="text/css" href="/css/center.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
    <link href="/css/public.css" rel="stylesheet">
    <script src="/js/common.js"></script>

    <script type="text/javascript" src="/js/message.js"></script>

    <style>
        .take_email {
            height: 630px;
            width: 100%;
            overflow: auto;
        }
    </style>
</head>
<body>

<div th:fragment="systemMessageReceive">
    <div class="as_bet_email">
        <div class="as_email_title">
            <h3>站内信</h3>
        </div>
        <div class="email_title_box">
            <div class="email_nav_title">
                <ul>
                    <a>
                        <li><span class="on" data-id="take_email">收件箱<i id="unReadMsg" th:if="${unReadMsgNum>0}" th:text="${unReadMsgNum}"></i></span></li>
                    </a>
                    <a style="display: none;">
                        <li class="middle"><span data-id="send_email">发件箱</span></li>
                    </a>
                    <a style="display: none;">
                        <li><span data-id="write_email">写消息</span></li>
                    </a>
                </ul>

                </ul>
            </div>
            <div id="take_email" class="take_email email_nr" style="display:block;">
                <table>
                    <tr class="mokl">
                        <th width="20%">时间</th>
                        <th>标题</th>
                        <th width="20%">状态</th>
                    </tr>
                </table>
                <table id="table_result"></table>
                <div id="barcon" name="barcon" style="text-align: center;"></div>
            </div>
        </div>
    </div>

    <div class="m_pop" style="display:none;">
        <div id="parentBorder" class="border" style="height: 285px;">
            <div class="m_detailmain">
                <div class="top">
                    <span class="top_title">收件箱</span>
                    <div class="close"></div>
                </div>
                <div class="title">
                    <div class="title_1" id="dialog_title">
                        捕鱼王返水将于9月30日结束
                        <div id="mess_del" class="delete"></div>
                    </div>
                    <span id="dialog_datetime">2017/9/22 17:53:05</span>
                </div>
                <div class="dialogue">
                    <ul>
                        <li class="customer">
                            <div class="pic"></div>
                            <div class="text">
                                <div class="text_info"><span class="info" id="dialog_content">尊敬的会员您好，捕鱼王返水将于2017年9月30日结束，特此通知，感谢您的支持~</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="loading" id="popLoading" style="display: none;"></div>
        </div>
    </div>

    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <script src="/js/layui/layui.js" charset="utf-8"></script>
    <script th:inline="javascript">
        var messageList = [[${messageList}]];

        //调用分页
        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage, layer = layui.layer;
            laypage.render({
                elem: 'barcon'
                , count: messageList.length
                , limit: 8
                , jump: function (obj) {
                    //模拟渲染
                    document.getElementById('table_result').innerHTML = function () {
                        var arr = [],
                            thisData = messageList.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                        layui.each(thisData, function (index, item) {
                            arr.push('<tr class="ms_table_row">' +
                                '<td width="20%">' + showLocale(new Date(item.createTime)) + '</td>' +
                                '<td><a href="javascript:void(0);" class="jkp" onclick="messageView(\'' + showLocale(new Date(item.createTime)) + '\',\'' + item.message + '\',\'' + item.title + '\',\'' + item.isread + '\',\'' + item.id + '\')">' + item.title + '</a></td>' +
                                '<td width="20%">' + (item.isread == 1 ? "未读" : "已读") + '</td>' +
                                '</tr>');
                        });
                        return arr.join('');
                    }();
                }
            });
        });
    </script>
    <link rel="stylesheet" href="/js/loading/loading.css">
    <script src="/js/loading/loading.js"></script>
    <script>
        var jiuXiuLoad = new Loading();
        jiuXiuLoad.init();

        $('.close').click(function () {
            $(".m_pop").hide();
        });

        function messageView(date, content, title, isRead, msgId) {
            if (isRead == 1) {
                jiuXiuLoad.start();
                $.ajax({
                    method: "POST",
                    url: "/api/updateMessageStatus",
                    data: {"messageId": msgId},
                    dataType: 'json'
                }).done(function (data) {
                    jiuXiuLoad.stop();
                    if (data.status == 'success') {
                        let currtMsgNum = $("#unReadMsg").text();
                        if (currtMsgNum > 0) {
                            $("#unReadMsg").html(currtMsgNum - 1);
                        }
                        console.log("update message: "+ data.data);
                    } else {
                        alertWorning(data.data);
                    }
                });
            }

            var m_popObj = $(".m_pop");

            m_popObj.find("#dialog_datetime").text(date);
            m_popObj.find("#dialog_content").text(content);
            m_popObj.find("#dialog_title").text(title);
            m_popObj.show();
        }

        function showLocale(objD) {
            var str;
            var yy = objD.getYear();
            if (yy < 1900) yy = yy + 1900;
            var MM = objD.getMonth() + 1;
            if (MM < 10) MM = '0' + MM;
            var dd = objD.getDate();
            if (dd < 10) dd = '0' + dd;
            var hh = objD.getHours();
            if (hh < 10) hh = '0' + hh;
            var mm = objD.getMinutes();
            if (mm < 10) mm = '0' + mm;
            var ss = objD.getSeconds();
            if (ss < 10) ss = '0' + ss;
            str = yy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss;
            return (str);
        }
    </script>
</div>

</body>
</html>
